﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>每人计门店对比分析</title>
    <link href="../css/new/animate.css" rel="stylesheet" type="text/css" />
    <link href="../css/new/bootstrap.min.css?v=3.4.0" rel="stylesheet" />
    <link href="../css/new/style.css?v=2.2.0" rel="stylesheet" />
    <style>
        .chart-h
        {
            text-align: center;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="chart2" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="chart5" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <div class="col-sm-9 m-b-xs">
                                <h5>
                                    时段客流分析
                                </h5>
                            </div>
                        </div>
                        <div class="ibox float-e-margins">
                            <div class="col-sm-9">
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" id="txtDate1" class="input-sm form-control bdate" onclick="laydate({ elem: '#txtDate1' });" />
                                    </div>
                                    <span class="input-group-btn">
                                        <button id="Button2" type="button" class="btn btn-sm btn-primary">
                                            刷新</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div id="chart3" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-lg-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="chart8" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="chart1" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>
                                按时段统计
                            </h5>
                        </div>
                        <div class="ibox float-e-margins">
                            <div class="ibox-content">
                                <div>
                                    <div class="col-sm-9 m-b-xs">
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <div class="input-group date">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                <input type="text" id="txtDate2" class="input-sm form-control bdate" onclick="laydate({ elem: '#txtDate2' });" />
                                            </div>
                                            <span class="input-group-btn">
                                                <button id="Button1" type="button" class="btn btn-sm btn-primary">
                                                    刷新</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="col-lg-6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-content">
                                        <div id="chart6" class="chart-h">
                                            加载数据中...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-content">
                                        <div id="chart7" class="chart-h">
                                            加载数据中...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!--<div class="col-lg-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="chart8" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>-->
                <div class="col-lg-12">
                    <div class="ibox-title">
                        <h5>
                            今年近13周客流分析
                        </h5>
                    </div>
                    <div class="ibox float-e-margins">
                        <!--<div class="input-group m-b col-md-6 col-md-offset-6">
                            <select id="selectShop" class="form-control">
                                <option value="1">加载中...</option>
                            </select>
                            <span class="input-group-btn">
                                <button type="button" id="Button3" class="btn btn-primary">
                                    刷新
                                </button>
                            </span>
                        </div>-->
                        <div class="input-group m-b col-md-6 col-md-offset-6">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-success" disabled>
                                    店铺：</button>
                            </span>
                            <input type="text" class="form-control" id="test_data" />
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"
                                    style="padding: 14px;">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="chart9" class="chart-h">
                                加载数据中...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/echarts.js" type="text/javascript"></script>
    <!-- Mainly scripts -->
    <script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="../js/config.js" type="text/javascript"></script>
    <script src="../js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="../js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <link href="../font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">
    <script src="../js/laydate.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.bdate').val(today);
            laydate.skin('molv');

            $('#Button2').on('click',function () {
                $("#chart3").html("正在加载中...");
                timeDate();
            });
            $('#Button1').on('click',function () {
                $("#chart6").html("正在加载中...");
                $("#chart7").html("正在加载中...");
                peakTimeDate();
            });
            $('#Button3').on('click',function () {
                $("#chart9").html("正在加载中...");
                Week2Date();
            });

            var loadShop = function(){
                $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                async:false,
                data: {
                    aciton: 'lodshoplist'
                },
                timeout: 90000,
                dataType: "json",
                success: function(data) {
                        //console.log(data);
                        //var _html = "";
                        var shopData = {value: [],defaults: "KM000055"};
                        data.map(function(item,i){
                            //_html +='<option value="'+item.shopid+'">'+item.shopname+'</option>';
                             shopData.value.push({
                                        id : item.shopid,
                                        word: item.shopname
                                    });
                        });
                        //$("#selectShop").html(_html);
                        var testdataBsSuggest = $("#test_data").bsSuggest({
                            indexId: 0,
                            indexKey: 1,
                            data: shopData
                        }).on("onSetSelectValue", function (e, keyword) {
                            console.log("onSetSelectValue: ", keyword)
                            $("#chart9").html("正在加载中...");
                            Week2Date(keyword.id);
                        });
                    }          
                });
            }
            loadShop();

            weekData();
            timeDate();
            yearDate();
            peakTimeDate();
            Week2Date("KM000055");

        });
        var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
         //周客流
        function weekData() {
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: {
                    aciton: 'mrj_week_data'
                },
                timeout: 90000,
                dataType: "json",
                success: function(data) {
                    //console.log(data);
                    option2 = {
                        title: {
                            text: '周数客流',
                            subtext: '数据来自每人计'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            y: 'bottom',
                            data: data.data.legend
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: data.data.category
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: data.data.series
                    };
                    var myChart2 = echarts.init(document.getElementById("chart2"));
                    myChart2.setOption(option2, true);
                }
            });
        }
         //时段客流
        function timeDate() {
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: {
                    aciton: 'mrj_time_data',
                    bdate:$("#txtDate1").val()
                },
                timeout: 90000,
                dataType: "json",
                success: function(data) {
                    //console.log(data);
                    option2 = {
                        title: {
                            subtext: '数据来自每人计'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function(params) {
                                // for text color
                                var color = colorList[params[0].dataIndex];
                                var res = '<div>';
                                res += '<strong>' + '['+$("#txtDate1").val()+']'+params[0].name + '</strong>'
                                for (var i = 0, l = params.length; i < l; i++) {
                                    res += '<br/>' + params[i].seriesName + ' : ' + params[i].value
                                }
                                res += '</div>';
                                return res;
                            }
                        },
                        legend: {
                            y: 'bottom',
                            data: ['本期', '上周同期']
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: data.data.category
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: data.data.series
                    };
                    var myChart = echarts.init(document.getElementById("chart3"));
                    myChart.setOption(option2, true);
                }
            });
        }
         //年月份客流
        function yearDate() {
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: {
                    aciton: 'mrj_year_data'
                },
                timeout: 90000,
                dataType: "json",
                success: function(data) {
                    //console.log(data);
                    option = {
                        title: {
                            text: '月客流',
                            subtext: '数据来自每人计'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            y: 'bottom',
                            data: ['今年', '去年']
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: data.data.category
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: data.data.series
                    };
                    var myChart = echarts.init(document.getElementById("chart5"));
                    myChart.setOption(option, true);
                }
            });
        }
         //日时间段客流
        function peakTimeDate() {
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: {
                    aciton: 'mrj_peaktime_data',
                    bdate:$("#txtDate2").val()
                },
                timeout: 90000,
                dataType: "json",
                success: function(data) {
                    //console.log(data);
                    option1 = {
                        title: {
                            subtext: '数据来自每人计'
                        },
                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: 'rgba(255,255,255,0.7)',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function(params) {
                                // for text color
                                var color = colorList[params[0].dataIndex];
                                var res = '<div style="color:' + color + '">';
                                res += '<strong>' + params[0].name + '人数</strong>'
                                for (var i = 0, l = params.length; i < l; i++) {
                                    res += '<br/>' + params[i].value
                                }
                                res += '</div>';
                                return res;
                            }
                        },
                        calculable: true,
                        grid: {
                            y: 80,
                            y2: 40,
                            x2: 40
                        },
                        xAxis: [{
                            type: 'category',
                            data: data.data.category
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [{
                            type: 'bar',
                            //itemStyle: itemStyle,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top'
                                    }
                                }
                            },
                            data: data.data.series
                        }]
                    };
                    option2 = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: data.data.category
                        },
                        calculable: true,
                        series: [{
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data.data.datalist
                        }]
                    };
                    var myChart = echarts.init(document.getElementById("chart6"));
                    myChart.setOption(option1, true);
                    var myChart2 = echarts.init(document.getElementById("chart7"));
                    myChart2.setOption(option2, true);
                }
            });
        }
         //近13周各流分析
        function Week2Date(shopid) {
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: {
                    aciton: 'mrj_13week_data',
                    shopid:shopid//$("#selectShop option:selected").val()
                },
                timeout: 90000,
                dataType: "json",
                success: function(data) {
                    //console.log(data);
                    option = {
                        title: {
                            text: '近13周单店每周客流分析',
                            x: 'center',
                            subtext:'默认数据北京路一店'
                        },
                        tooltip: {
                            show: true,
                            trigger: 'item'
                        },
                        legend: {
                            y: 'bottom',
                            data: ['周均客流量', '近13周平均值']
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            data: data.data.category
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [{
                            name: '周均客流量',
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top'
                                    }
                                }
                            },
                            barWidth: 40, // 系列级个性化，柱形宽度
                            data: data.data.series,
                            markLine: {
                                data: [{
                                    type: 'average',
                                    name: '近13周平均值'
                                }]
                            }
                        }]
                    };
                    var myChart = echarts.init(document.getElementById("chart9"));
                    myChart.setOption(option, true);
                }
            });
        }
        option = {
            title: {
                text: '大区客流',
                subtext: '数据来自每人计'
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255,255,255,0.7)',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    // for text color
                    var color = colorList[params[0].dataIndex];
                    var res = '<div style="color:' + color + '">';
                    res += '<strong>' + params[0].name + '客流量</strong>'
                    for (var i = 0, l = params.length; i < l; i++) {
                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value
                    }
                    res += '</div>';
                    return res;
                }
            },
            legend: {
                x: 'right',
                orient: 'vertical',
                data: ['李丽君', '郭春辉', '董龙飞', '黄莎', '达燃']
            },
            calculable: true,
            grid: {
                y: 80,
                y2: 40,
                x2: 40
            },
            xAxis: [{
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '李丽君',
                type: 'bar',
                //itemStyle: itemStyle,
                data: [4804.7, 1444.3, 1332.1, 908, 871.8, 1983.7, 646.5]
            }, {
                name: '郭春辉',
                type: 'bar',
                //itemStyle: itemStyle,
                data: [5506.3, 1674.7, 1405, 1023.2, 969, 2149.7, 1851.7]
            }, {
                name: '董龙飞',
                type: 'bar',
                //itemStyle: itemStyle,
                data: [6040.9, 1823.4, 1484.3, 1116.1, 1063.7, 2455.5, 2033.5]
            }, {
                name: '黄莎',
                type: 'bar',
                //itemStyle: itemStyle,
                data: [6040.9, 1823.4, 1484.3, 1116.1, 1063.7, 2455.5, 2033.5]
            }, {
                name: '达燃',
                type: 'bar',
                //itemStyle: itemStyle,
                data: [6311.9, 1902, 1745.1, 1215.1, 1118.3, 2736.9, 2294]
            }]
        };
        option4 = {
            title: {
                text: '周客流',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 'right',
                orient: 'vertical',
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '刷新引擎']
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            }, {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            }, {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
            }, {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: [320, 332, 301, 334, 390, 330, 320]
            }, {
                name: '刷新引擎',
                type: 'line',
                stack: '总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }]
        };
        option8 = {
            title: {
                text: '本周与上周客流对比',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            calculable: true,
            legend: {
                data: ['蒸发量', '降水量', '平均温度'],
                y: 'bottom'
            },
            xAxis: [{
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }],
            yAxis: [{
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ml'
                }
            }, {
                type: 'value',
                name: '温度',
                axisLabel: {
                    formatter: '{value} °C'
                }
            }],
            series: [{
                name: '蒸发量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            }, {
                name: '降水量',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            }, {
                name: '平均温度',
                type: 'line',
                yAxisIndex: 1,
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }]
        };
        var myChart = echarts.init(document.getElementById("chart1"));
        //myChart.setOption(option, true);
//        var myChart4 = echarts.init(document.getElementById("chart4"));
//        myChart4.setOption(option4, true);
        var myChart8 = echarts.init(document.getElementById("chart8"));
        //myChart8.setOption(option8, true);
    </script>
</body>
</html>
